import React, { useRef, useState } from 'react';
import PageA from './PageA';
import PageB from './PageB';
import CircleTransition from './CircleTransition';
import { AnimatePresence } from 'framer-motion';

// 计算从(x, y)到视口四个角的最大距离，作为圆的最大半径，确保动画能覆盖全屏
const getMaxRadius = (x, y) => {
  const w = window.innerWidth;
  const h = window.innerHeight;
  const d1 = Math.hypot(x, y);
  const d2 = Math.hypot(w - x, y);
  const d3 = Math.hypot(x, h - y);
  const d4 = Math.hypot(w - x, h - y);
  return Math.max(d1, d2, d3, d4);
};

const Index = () => {
  // 当前显示的是B页面吗？
  const [showB, setShowB] = useState(false);
  // 动画是否正在进行中
  const [animating, setAnimating] = useState(false);
  // 动画圆心坐标
  const [center, setCenter] = useState({ x: 0, y: 0 });
  // 动画圆最大半径
  const [maxRadius, setMaxRadius] = useState(0);
  // 记录下一个要切换到的页面（'A' 或 'B'），动画层内容用
  const [nextPage, setNextPage] = useState(null); // 'A' or 'B'
  // 动画方向，'out'为扩散，'in'为收缩
  const [direction, setDirection] = useState('out');
  // 动画完成后再切换页面的标志
  const [pendingSwitch, setPendingSwitch] = useState(false);
  // 按钮ref，用于获取按钮中心坐标
  const buttonRef = useRef(null);

  /**
   * 点击按钮时触发切换动画
   * 1. 计算按钮中心点坐标
   * 2. 计算最大半径，确保圆能覆盖整个视口
   * 3. 设置目标页面和动画方向
   * 4. 开始动画
   */
  const handleClick = () => {
    if (buttonRef.current) {
      // 获取按钮中心点坐标
      const rect = buttonRef.current.getBoundingClientRect();
      const x = rect.left + rect.width / 2;
      const y = rect.top + rect.height / 2;
      setCenter({ x, y });
      // 计算最大半径，确保圆能覆盖整个视口
      setMaxRadius(getMaxRadius(x, y));
      // 记录目标页面
      const toB = !showB;
      setNextPage(toB ? 'B' : 'A');
      // 设置动画方向：切到B时扩散，切回A时收缩
      setDirection(toB ? 'out' : 'in');
      // 开始动画
      setAnimating(true);
      setPendingSwitch(false);
    }
  };

  /**
   * 动画完成时，先关闭动画层，等动画层完全unmount后再切换页面
   * 这样可以避免动画层因状态切换被错误地再次渲染，导致动画重复
   */
  const handleAnimationComplete = () => {
    setAnimating(false); // 关闭动画层
    setPendingSwitch(true); // 标记需要切换页面
  };

  /**
   * 动画层完全unmount后再切换页面（AnimatePresence的onExitComplete）
   * 这样可以保证动画层彻底消失后再切换页面，避免动画重复
   */
  const handleExitComplete = () => {
    if (pendingSwitch) {
      if (nextPage === 'B') {
        setShowB(true); // 切换到B页面
      } else if (nextPage === 'A') {
        setShowB(false); // 切换回A页面
      }
      setNextPage(null); // 清空目标页面
      setPendingSwitch(false); // 清空切换标志
    }
  };

  /**
   * 动画时，底层始终是A页面，动画层始终是B页面
   * 扩散：A->B，底层A，动画层B，clip-path 0->max
   * 收缩：B->A，底层A，动画层B，clip-path max->0
   * 非动画时，正常显示当前页面
   */
  let basePage, transitionPage;
  if (animating && nextPage) {
    if (nextPage === 'B') {
      // A -> B: 扩散，底层A，动画层B
      basePage = <PageA />;
      transitionPage = <PageB />;
    } else if (nextPage === 'A') {
      // B -> A: 收缩，底层A，动画层B
      basePage = <PageA />;
      transitionPage = <PageB />;
    }
  } else {
    // 非动画时，正常显示当前页面
    basePage = showB ? <PageB /> : <PageA />;
    transitionPage = null;
  }

  return (
    <div style={{ position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden' }}>
      {/* 外层内容：当前页面（非动画层） */}
      {basePage}
      {/* 切换按钮，始终居中，动画或切换过程中禁用，防止多次点击 */}
      <button
        ref={buttonRef}
        onClick={handleClick}
        style={{
          position: 'absolute',
          left: '50%',
          top: '50%',
          transform: 'translate(-50%, -50%)',
          width: 80,
          height: 80,
          borderRadius: 16,
          background: '#1976d2',
          color: '#fff',
          fontSize: 24,
          border: 'none',
          cursor: 'pointer',
          zIndex: 10,
        }}
        disabled={animating || pendingSwitch}
      >
        切换
      </button>
      {/* 动画层：目标页面内容。只有动画时才显示，clip-path实现同心圆扩散/收缩 */}
      <AnimatePresence onExitComplete={handleExitComplete}>
        {animating && nextPage !== null && (
          <CircleTransition
            show={animating && nextPage !== null}
            center={center}
            maxRadius={maxRadius}
            direction={direction}
            onAnimationComplete={handleAnimationComplete}
          >
            {transitionPage}
          </CircleTransition>
        )}
      </AnimatePresence>
    </div>
  );
};

export default Index;
